// pages/data/data.js
import * as echarts from '../../ec-canvas/echarts';

var app = getApp();
var util = require('../../utils/util.js');  

var length = 4    //坐标轴上数据点的个数

var chart   //图表变量 -- 总图
var chart1  //单个图表  --  第一张图
var option  //echart属性设置变量
var array_data1 = [length];  //长度为4的数组，存储数据1
var array_data2 = [length];  //长度为4的数组，存储数据2
var array_x = [length];      //长度为4的数组，存储x轴的数据
var array_dataName = [];     //长度不定的数组，存储图例以及曲线数据名称

array_dataName.push('温度')  //保存温度曲线名称
array_dataName.push('流量')  //保存流量曲线名称




function addData(shift) {
  array_data1.push(parseFloat(app.globalData.receive_data));  //加入数据
  array_data2.push(parseFloat(app.globalData.receive_data));  //加入数据
  if (shift) {
    array_data1.shift();
    array_data2.shift();
  }
}
function addXAxis(shift) {
  var TIME = util.getTime(new Date());
  array_x.push(TIME)    //加入时间  
  if (shift) {
    array_x.shift();
  }
}


for (var i = 0; i < length; i++) {
  addData();
  addXAxis();
}

//--------------ECharts相关部分-----------------//
//获取像素比
const getPixelRatio = () => {
  let pixelRatio = 0
  wx.getSystemInfo({
    success: function (res) {
      pixelRatio = res.pixelRatio
    },
    fail: function () {
      pixelRatio = 0
    }
  })
  return pixelRatio
}


function initChart(canvas, width, height) {
  var dpr = getPixelRatio()
    chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  });
  canvas.setChart(chart);
 
  for(let j=0;j<length;j++){
    var TIME = util.getTime(new Date());
    array_x[j]=TIME
    array_data1[j]=0
    array_data2[j]=0
  }
 

    option = {
      title: {
        text: '实时数据',
        left: 'center',      
      },
      color: ["#37A2DA", "#67E0E3"],
      legend: {
        // icon: 'rect',  //提供'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
        itemWeight: 7, //修改icon图形大小
        textStyle: {
          fontSize: 13,
          color: '#000'
        },
        show:true,  //是否显示图例
        type:"plain", //图例样式
        data: array_dataName, 
        // top: '3%',
        right:'7%',
        // left: 'right',
        orient: 'vertical',
        z: 100
      },
      grid: {
        containLabel: true
      },
      tooltip: {  //点击数据点时显示对应提示
        show: true,
        trigger: 'axis'
      },
      xAxis: {
        name: '当前时间(H:M:S)',
        nameLocation:'middle',
        nameGap:50,
        type: 'category',
        boundaryGap: true,  //表示不从零刻度开始
        data: [util.getTime(new Date()), util.getTime(new Date()), util.getTime(new Date()), util.getTime(new Date()), util.getTime(new Date())],      //x轴数据
        axisLabel: {
          interval:0,  //X轴不间隔显示，没有此属性的时候间隔显示是因为X轴每个点的名称太长，设置为1则表示间隔一个显示，以此类推
          rotate:45,   //代表逆时针旋转45度
        }
      },
      yAxis: {
        name: '数值',
        nameLocation:'middle',
        nameGap:30,
        x: 'center',
        type: 'value',
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        }
      },
      series: [{
        name: array_dataName[0],
        type: 'line',
        smooth: true,
        data: array_data1,  //添加的数据
        symbolSize: 5,  //折线点的大小
        itemStyle : { normal: {label : {show: true}}} //折线图上显示数据点
      }, {
        name: array_dataName[1],
        type: 'bar',
        smooth: true,
        data: array_data2,
        itemStyle : { normal: {label : {show: true}}} //折线图上显示数据点
      }]
    };
    chart.setOption(option);
    return chart;  
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    bluet_conn_flag: app.globalData.bluet_conn_flag,    //蓝牙连接状态
    receive_data: app.globalData.receive_data,          //接收的数据
    // single_chart_flag:false,    //单个图表曲线显示
    pic_array_data: [],   //pick组件-存储数据名称
    pic_array_style: [    //pick组件-存储显示样式名称  line   bar
      {id:0, name:'请选择样式'},
      {id:1, name:'折线图'},
      {id:2, name:'柱状图'},
    ],
    pic_array_data_index: 0,  //pick组件-曲线名称下标
    pic_array_style_index: 0, //pick组件-样式名称下标
    ischecked_data1:true,    //复选框数据1的选中状态  -- 默认选中
    ischecked_data2:true,    //复选框数据2的选中状态  -- 默认选中
    ischecked_sel_all:true,  //全选  -- 默认选中
    ischecked_sel_nall:false,//全不选  -- 与全选对立
    ec: {
      onInit: initChart
    }
  },
  /**
   * pick下拉组件数据选择
   * @param {*} e 
   */
  bindPickerChange_data: function (e) {
    this.setData({   //给变量赋值
      pic_array_data_index: e.detail.value,  //每次选择了下拉列表的内容同时修改下标然后修改显示的内容，显示的内容和选择的内容一致
    })
    if(e.detail.value > 0)
    {
      this.setData({   
        pic_array_style_index: 0,  //每次选择了数据之后，样式选择处都重置
      })
    }
  },
  /**
   * pick下拉组件样式选择
   * @param {*} e 
   */
  bindPickerChange_style: function (e) {
    this.setData({ 
      pic_array_style_index: e.detail.value,  
    })
    if(this.data.pic_array_style_index > 0){
      if((this.data.pic_array_data[this.data.pic_array_data_index].name) === '流量'){
        if(this.data.pic_array_style[this.data.pic_array_style_index].name === '折线图'){
          chart.setOption({
            series: [{
              //修改样式之后再次加入显示数据点是因为修改之后可能因为界面拥挤导致数据点不显示
              itemStyle : { normal: {label : {show: true}}},  
            },{
              type: 'line',
              itemStyle : { normal: {label : {show: true}}},
            }],
          });
        }else{
          chart.setOption({
            series: [{
              itemStyle : { normal: {label : {show: true}}},
            },{
                type: 'bar',
                itemStyle : { normal: {label : {show: true}}},
            }],
          });
        }
      }else if((this.data.pic_array_data[this.data.pic_array_data_index].name) === '温度'){
        if(this.data.pic_array_style[this.data.pic_array_style_index].name === '折线图'){
          chart.setOption({
            series: [{
                type: 'line',
                itemStyle : { normal: {label : {show: true}}},
              },{
                itemStyle : { normal: {label : {show: true}}},
              }],
          });
        }else{
          chart.setOption({
            series: [{
                type: 'bar',
                itemStyle : { normal: {label : {show: true}}},
              },{
                itemStyle : { normal: {label : {show: true}}},
              }],
          });
        }
      }else{
        wx.showToast({
          title: '请先选择数据源！',
          icon:'error',
          duration:1000, //提示延迟时间
        })
        this.setData({ 
          pic_array_style_index: 0,  
        })
      }
   }

   console.log(this.data.pic_array_data[this.data.pic_array_data_index].name)
   console.log(this.data.pic_array_style[this.data.pic_array_style_index].name)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
    //填充pick下拉组件数据选项
    var newArray= [{ id: 0, name: '请选择数据'}]
    this.setData({
      pic_array_data: this.data.pic_array_data.concat(newArray)
    })
    for(let i=1;i<=array_dataName.length;i++)
    {
      newArray= [{ id: i, name: array_dataName[i-1]}]
      this.setData({
        pic_array_data: this.data.pic_array_data.concat(newArray)
      })
    }  
    
    //定时1秒更新横坐标以及数值
    setInterval(() => {      
      if(app.globalData.characterRWN_conn_flag){  //具有RWN特性的特性值连接了才能更新数据
        addData(true);
        addXAxis(true)
        chart.setOption({
          xAxis: {
            data: array_x
          },
        });
        chart.setOption({            
          series: [{
            data: array_data1
          }, {
            data: array_data2
          }]
        });    
        // console.log(array_data1)
        // console.log(array_x)
      }
    },1000)
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0
      })
    }
    if(!app.globalData.characterRWN_conn_flag){
      wx.showToast({
        title: '蓝牙设备未连接！',
        icon:'error',
        duration:1000, //提示延迟时间
      })
    }
    setInterval(() => {
      this.setData({
        bluet_conn_flag: app.globalData.bluet_conn_flag,
        receive_data: app.globalData.receive_data,
      })
    },1000)
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },


  canvasToPath () {
    const ecComponent = this.selectComponent('#mychart');
    // 先保存图片到临时的本地文件，然后存入系统相册
    ecComponent.canvasToTempFilePath({
      success: res => {
        console.log("tempFilePath:", res.tempFilePath)

        // 存入系统相册
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath || '',
          success: res => {
            console.log("success", res)
            // this.saveImageToPhotos(res.tempFilePath)
          },
          fail: res => {
            console.log("fail", res)
          }
        })
      },
      fail: res => console.log(res)
    });
  },
  // 微信提示方法
  showToast (title) {
    wx.showToast({
      title: title
    });
  },

  /**
   * 数据1的复选框
   * @param {*} e 
   */
  choose_data1:function(e){
    // var name1 = JSON.stringify(array_dataName[0])
    // console.log(name1)
    this.setData({
      ischecked_data1:!this.data.ischecked_data1  //点击时先给数据1复选框取反
    })
    chart.setOption({
      legend: {
        selected: {
          // 选中'系列1'
          '温度': this.data.ischecked_data1,  //此处必须用 \'温度'\  的形式，使用变量无效
          // 不选中'系列2'
          '流量': this.data.ischecked_data2,
        }
      }
    });
    this.check_select_all(e.currentTarget.dataset.index)
  },

  /**
   * 数据2的复选框
   * @param {*} e 
   */
  choose_data2:function(e){
    this.setData({
      ischecked_data2:!this.data.ischecked_data2 
    })
    chart.setOption({
      legend: {
        selected: {
          '温度': this.data.ischecked_data1,  //此处必须用 \'温度'\  的形式，使用变量无效
          '流量': this.data.ischecked_data2,
        }
      }
    });
    this.check_select_all(e.currentTarget.dataset.index)
  },

  /**
   * 全选的复选框
   * @param {*} e 
   */
  choose_all:function(e){
    this.setData({
      ischecked_sel_all:!this.data.ischecked_sel_all
    })    
    this.check_select_all(e.currentTarget.dataset.index)
    chart.setOption({
      legend: {
        selected: {
          '温度': this.data.ischecked_data1,  //此处必须用 \'温度'\  的形式，使用变量无效
          '流量': this.data.ischecked_data2,
        }
      }
    });    
  },

  /**
   * 全不选的复选框
   * @param {*} e 
   */
  choose_nall:function(e){
    this.setData({
      ischecked_sel_nall:!this.data.ischecked_sel_nall,
    })
    this.check_select_all(e.currentTarget.dataset.index)
    chart.setOption({
      legend: {
        selected: {
          '温度': this.data.ischecked_data1,  //此处必须用 \'温度'\  的形式，使用变量无效
          '流量': this.data.ischecked_data2,
        }
      }
    });
  },

  /**
   * 点击某个复选框的引发连锁反应处理
   * @param {*} e 
   */
  check_select_all: function(eindex){
    // var index = parseInt(eindex)
    if(parseInt(eindex) == 1 || parseInt(eindex) == 2){
      if(this.data.ischecked_data1 && this.data.ischecked_data2){
        this.setData({
          ischecked_sel_all: true,
          ischecked_sel_nall: false,
        })
      }else if(!this.data.ischecked_data1 && !this.data.ischecked_data2){
        this.setData({
          ischecked_sel_all: false,
          ischecked_sel_nall: true,
        })
      }else{
        this.setData({
          ischecked_sel_all: false,
          ischecked_sel_nall: false,
        })
      }
    }else if(parseInt(eindex) == -1){
      if(this.data.ischecked_sel_all){
        this.setData({
          ischecked_data1: true,
          ischecked_data2: true,
          ischecked_sel_all:true,
          ischecked_sel_nall:false,
        })
      }
    }else if(parseInt(eindex) == -2){
      if(this.data.ischecked_sel_nall){
        this.setData({
          ischecked_data1: false,
          ischecked_data2: false,
          ischecked_sel_all:false,
          ischecked_sel_nall:true,
        })
      }
    }    
  },
})